<template>
  <a-form class="listSearchWrap vehicleVersionSearch table-page-search-wrapper">
    <a-row :gutter="[16,0]">
      <a-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="4"
        :xl="4"
        :xxl="4">
        <a-form-item :colon="false">
          <!-- 车系名称 -->
          <a-select
            v-model="queryParams.brandId"
            showSearch
            allow-clear
            :defaultActiveFirstOption="false"
            optionFilterProp="children"
            :filterOption="$commonFun.filterOption"
            :placeholder="$t('brandName')"
            :maxTagCount="1"
            @change="changeOption('brandId', $event)"
            style="width:100%; margin-bottom: 20px;"
          >
            <a-select-option
              v-for="(item,index) in brandSeleList"
              :key="'brand'+index"
              :value="item.id"
              :title="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="4"
        :xl="4"
        :xxl="4">
        <a-form-item :colon="false">
          <car-model-select
            v-model="queryParams.modelId"
            :hasAll="false"
            :clear="true"
            mode="multiple"
            :maxTagCount="1"
            @changeoption="changeOption('modelId', $event)"
            placeholder="vehicleModel"
          ></car-model-select>
        </a-form-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="4"
        :xl="4"
        :xxl="4">
        <a-form-item :colon="false">
          <a-input
            v-model.trim="queryParams.name"
            @change="$emit('change', queryParams)"
            :placeholder="$t('pleaseInput') + $t('smartDrivingDomainVersion').toLowerCase()"
            @keyup.enter="handleSearch"
            allowClear
          />
        </a-form-item>
      </a-col>
      <!-- 创建时间 -->
      <a-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="5"
        :xl="5"
        :xxl="5">
        <a-form-item :colon="false">
          <a-range-picker
            :value="defaultDateRange"
            :getCalendarContainer="showtoBody()"
            @change="onCreateRangeChange"
            :disabledDate="disabledBehindDate"
            :placeholder="[$t('create')+$t('startTime'), $t('create')+$t('endTime')]"
            :allow-clear="true"
            style="width:100%;"
          />
        </a-form-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="7"
        :xl="7"
        :xxl="7"
      >
        <div class="searchBtns">
          <a-button-group>
            <auth-button type="primary" :auth="softwarePerms.vehicleVersion[versionType.toLowerCase()].view" @click="handleSearch">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
          <auth-button :auth="softwarePerms.vehicleVersion.prod.add" @click="handleAdd" v-if="versionType=='PROD'">
            <i class="iconfont icon-xinjian"></i>
            {{ $t('smartDrivingDomainVersion') }}
          </auth-button>
          <auth-button :auth="softwarePerms.vehicleVersion.test.add" @click="handleAdd" v-if="versionType=='TEST' && !queryParams.fromGcy">
            <i class="iconfont icon-xinjian"></i>
            {{ $t('smartDrivingDomainVersion') }}
          </auth-button>
        </div>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import AuthButton from '@/components/AuthButton'
import { softwarePerms } from '@/config/permission/index'
import CarModelSelect from '@/views/components/CarModelSelect'
import moment from 'moment'
export default {
  components: {
    AuthButton,
    CarModelSelect
  },
  props:{
    versionType: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => {
        return {
          // 车型ID
          modelId: undefined,
          // 车辆版本名称
          name: undefined,
          vehicleVersionId: undefined,
          createBy: undefined,
          createTimeLte: undefined,
          createTimeGte: undefined,
          brandId: undefined
        }
      }
    }
  },
  computed: {
    // ...mapState({
    //   queryParams: (state) => state.vehicleVersion.queryParams[this.versionType]
    // })
    queryParams:{
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);    // 触发
      }
    },
    // 创建日期选择的默认值
    defaultDateRange () {
      if (this.queryParams.createTimeGte && this.queryParams.createTimeLte) {
        return [moment(this.queryParams.createTimeGte), moment(this.queryParams.createTimeLte)]
      }
      return []
    }
  },
  model: {
    prop: "value", //绑定的值，通过父组件传递
    event: "change" //自定义事件名
  },
  data () {
    return {
      softwarePerms,
      brandSeleList: []
    }
  },
  watch: {
  },
  created () {
    this.filterItem()
  },
  activated() {

  },
  methods: {
    // 车系数据
    filterItem () {
      this.$api.getAllBrand().then(response => {
        this.brandSeleList = response.data
      }).catch((e) => vm.$message.error("获取车系失败！"))
    },
    // 解决选择器被容器遮挡的问题
    showtoBody () {
      return () => document.body
    },
    // 创建日期选择
    onCreateRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.createTimeGte = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.createTimeLte = dateString[1]
      this.$emit('change', this.queryParams)
    },
    // 日期选择的禁选日期
    disabledBehindDate (current) {
      return current && current > moment().endOf('day')
    },
    handleSearch () {
      // this.$emit('clickbtn', { type: 'searchData', data: true })
      this.$emit('change', this.queryParams);
    },
    handleAdd () {
      this.$emit('clickbtn', { type: 'addVehicleVersion' })
    },
    changeOption (key, val) {
      this.queryParams[key] = val
      // this.$set(this.queryParams, key, val)
      this.$emit('change', this.queryParams);    // 触发
    },
    clearCondition () {
      // this.$store.commit('resetVehicleVersionQueryParams')
      // this.handleSearch()
      this.$set(this.queryParams,'name',undefined)
      this.$set(this.queryParams,'modelId',undefined)
      this.$set(this.queryParams, 'createTimeLte', undefined)
      this.$set(this.queryParams, 'createTimeGte', undefined)
      this.$set(this.queryParams, 'brandId', undefined)
      this.$emit('change', this.queryParams);    // 触发
    }
  }
}
</script>
<style lang="less">
.vehicleVersionSearch {
   @media (max-width: 576px) {
    .searchBtns button:nth-last-child(1) {
      margin-top: 16px;
    }
  }
}

</style>
